<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>悬浮文本</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div id="top-bar">
    <div><span id="soft-title">悬浮文本</span></div>
    <div>
      <svg id="copy-btn" class="top-bar-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="2432" width="200" height="200">
        <path
          d="M629.39164 415.032528l-163.616428-163.616428c-7.992021-7.992021-20.947078-7.992021-28.939099 0-7.992021 8.002254-7.992021 20.957311 0 28.949332l128.680754 128.680754-175.548178 0L389.968689 184.082552c0-11.2973-9.168824-20.466124-20.466124-20.466124L21.813818 163.616428c-11.307533 0-20.466124 9.168824-20.466124 20.466124l0 818.08214c0 11.307533 9.15859 20.466124 20.466124 20.466124l593.108273 0c11.307533 0 20.466124-9.15859 20.466124-20.466124L635.388215 429.512311C635.388215 424.078555 633.229039 418.880159 629.39164 415.032528zM594.455967 981.698568l-552.176025 0L42.279942 204.548676l306.756499 0 0 224.963635c0 11.2973 9.15859 20.466124 20.466124 20.466124l224.953402 0L594.455967 981.698568z"
          p-id="2433" fill="var(--color)"></path>
        <path
          d="M1023.978511 265.895883l0 572.652382c0 11.307533-9.15859 20.466124-20.466124 20.466124l-307.86167 0c-11.2973 0-20.466124-9.15859-20.466124-20.466124 0-11.2973 9.168824-20.466124 20.466124-20.466124l287.395546 0L983.046263 286.362007l-224.953402 0c-11.307533 0-20.466124-9.168824-20.466124-20.466124L737.626737 40.932248l-306.756499 0 0 75.693959c0 11.307533-9.168824 20.466124-20.466124 20.466124-11.307533 0-20.466124-9.15859-20.466124-20.466124L389.93799 20.466124c0-11.2973 9.15859-20.466124 20.466124-20.466124l347.688747 0c11.2973 0 20.466124 9.168824 20.466124 20.466124l0 224.963635 175.548178 0-128.680754-128.680754c-7.992021-7.992021-7.992021-20.947078 0-28.949332 7.992021-7.992021 20.947078-7.992021 28.939099 0l163.616428 163.626661C1021.819334 255.263731 1023.978511 260.462127 1023.978511 265.895883z"
          p-id="2434" fill="var(--color)"></path>
      </svg>
      <svg id="save-btn" class="top-bar-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="1454" width="200" height="200">
        <path
          d="M819.823 83.694H206.991c-67.703 0-122.588 54.885-122.588 122.588v612.833c0 67.703 54.885 122.588 122.588 122.588h612.833c67.703 0 122.588-54.885 122.588-122.588V206.282c-0.001-67.703-54.885-122.588-122.589-122.588z m-124.435 63.313v241.142H331.772V147.007h363.616z m185.787 672.274c0.027 33.765-27.323 61.158-61.088 61.185H207.133c-16.389 0-31.864-6.297-43.454-17.887s-18.039-26.91-18.039-43.298v-612.94c0.061-33.923 27.57-61.395 61.493-61.41h61.327v245.294c-0.05 33.771 27.286 61.187 61.057 61.237h367.888c33.853 0 61.299-27.387 61.299-61.237V144.931h61.206c33.872 0.036 61.301 27.524 61.265 61.396V819.281z"
          fill="var(--color)" p-id="1455"></path>
        <path
          d="M574.817 329.936c17.483 0 31.656-14.173 31.656-31.656v-61.292c0-17.483-14.173-31.656-31.656-31.656s-31.656 14.173-31.656 31.656v61.292c0 17.483 14.173 31.656 31.656 31.656z"
          fill="var(--color)" p-id="1456"></path>
      </svg>
      <svg id="always-on-top-btn" class="top-bar-icon" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="1453" width="200" height="200">
        <path
          d="M927.701333 375.978667l-279.637333-279.637334A37.546667 37.546667 0 0 0 621.397333 85.333333a37.546667 37.546667 0 0 0-26.666666 11.008L411.904 279.296a366.506667 366.506667 0 0 0-41.770667-2.304 374.016 374.016 0 0 0-234.325333 82.048 37.717333 37.717333 0 0 0-3.072 56.064l206.208 206.208-244.48 244.224a17.92 17.92 0 0 0-5.205333 11.093333l-3.84 42.24a18.090667 18.090667 0 0 0 18.048 19.754667c0.554667 0 1.109333 0 1.706666-0.128l42.24-3.84a17.92 17.92 0 0 0 11.093334-5.248l244.437333-244.437333 206.208 206.208a37.546667 37.546667 0 0 0 26.666667 11.008 37.546667 37.546667 0 0 0 29.397333-14.08 374.826667 374.826667 0 0 0 79.658667-276.224l182.826666-182.826667a37.589333 37.589333 0 0 0 0-53.077333z m-240.725333 178.346666l-27.776 27.818667 4.266667 39.04a294.997333 294.997333 0 0 1-34.474667 174.677333L228.309333 394.922667a293.546667 293.546667 0 0 1 174.634667-34.517334l39.04 4.309334 27.818667-27.776 151.722666-151.722667 217.301334 217.301333-151.850667 151.850667z"
          fill="var(--color)" p-id="1454"></path>
      </svg>
      <svg id="setting-btn" class="top-bar-icon" viewBox="0 0 1025 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="2405" width="200" height="200">
        <path
          d="M511.946668 318.905356c-106.40845 0-193.041312 86.611529-193.041312 193.083977 0 106.451116 86.590196 193.083977 193.041312 193.083977 106.493781 0 193.126643-86.632862 193.126643-193.083977S618.440449 318.905356 511.946668 318.905356zM511.946668 662.343535c-82.878273 0-150.311535-67.433262-150.311535-150.354201 0-82.899606 67.433262-150.354201 150.311535-150.354201 82.920939 0 150.4182 67.454595 150.4182 150.354201C662.364867 594.910273 594.867607 662.343535 511.946668 662.343535z"
          p-id="2406" fill="var(--color)"></path>
        <path
          d="M950.444199 382.22137l-70.782525 0.234662c-0.554655-0.255995-1.557301-1.066644-2.21862-2.645278l-14.229037-33.74863c-0.085332-0.575988 0.170663-1.727964-0.66132-0.938647l51.113602-51.134935c13.973042-13.909044 21.674215-32.468657 21.674215-52.180246S927.554009 203.51576 913.730297 189.649382l-79.273015-79.358347c-26.772776-26.794108-77.395721-26.815441-104.360492 0l-50.836274 50.772276-36.201912-14.655695C642.567947 146.044957 641.906627 145.063645 641.906627 146.172955L641.906627 73.747797C641.906627 33.087311 608.733985 0 568.073498 0l-112.125664 0c-40.660486 0-73.726464 33.087311-73.726464 73.747797l0.255995 70.569196c-0.213329 0.575988-1.10931 1.6213-2.709277 2.303952L346.25412 160.636653c-0.853316 0-1.706631-0.170663-2.303952-0.341326L293.967209 110.269703c-26.687444-26.751443-77.566384-26.772776-104.296494 0l-79.145018 79.230349c-14.058374 13.887711-21.78088 32.425991-21.78088 52.265578 0 19.754255 7.722506 38.292536 21.588884 52.116248l50.06829 49.748297c0.234662 0.554655 0.341326 1.91996-0.319993 3.583925l-13.674382 33.812629c-0.319993 0.426658-1.25864 1.10931-0.213329 1.130643L73.747797 382.157372C33.065978 382.157372 0 415.266015 0 455.926502l0 112.125664c0 40.61782 33.087311 73.705131 73.790463 73.683798l70.633195-0.29866c0.597321 0.255995 1.685298 1.151976 2.261286 2.453282l14.165038 33.961959c0.063999 0.618654-0.106664 1.791963 0.682652 1.066644L110.504364 729.968792c-14.037041 13.887711-21.759547 32.468657-21.759547 52.244245s7.722506 38.313868 21.588884 52.094915l79.315681 79.401012c26.666111 26.602112 77.502385 26.666111 104.232495-0.042666l50.708277-50.793608 36.436574 14.677028c0.426658 0.405325 1.10931 1.365305 1.151976 0.277328l0 72.403825c0 40.681819 33.087311 73.76913 73.747797 73.76913l112.125664 0c40.681819 0 73.854461-33.087311 73.811796-73.76913l-0.255995-70.611862c0.213329-0.554655 1.151976-1.706631 2.538614-2.261286l33.620633-13.973042c0.831983 0.042666 1.663965 0.213329 2.21862 0.341326l50.21762 50.132289c26.666111 26.602112 77.289056 26.751443 104.211162-0.042666l79.123685-79.209016c14.037041-13.930376 21.738214-32.48999 21.738214-52.244245 0-19.732922-7.722506-38.271203-21.567551-52.073582l-50.21762-50.21762c-0.042666-0.746651 0-1.877294 0.447991-3.114602l13.717048-33.961959c0.383992-0.447991 1.301306-1.10931 0.255995-1.130643l72.531822 0c40.553822 0 73.577134-33.065978 73.577134-73.705131l0-112.125664C1024.021333 415.330014 990.998021 382.22137 950.444199 382.22137zM981.248891 568.052166c0 17.066311-13.845045 30.954022-30.847357 30.954022l-72.617154 0c-16.703652 0-34.580613 12.757068-39.380513 27.263432l-13.482386 33.065978c-7.807837 16.021-4.693236 37.844545 7.189184 49.684298l51.369596 51.369596c5.823879 5.781213 9.002479 13.503719 9.002479 21.78088s-3.242599 16.106331-9.173142 21.951543l-79.081019 79.230349c-10.922439 10.85844-33.001979 10.85844-43.881752 0.063999l-51.326931-51.284265c-10.837108-10.773109-26.708777-11.605092-31.295348-11.605092-6.378534 0-12.117081 1.279973-15.743672 3.114602l-32.916648 13.717048c-16.788984 5.781213-29.90871 23.551509-29.90871 40.383159l0 72.510489c0 17.108977-13.909044 31.01802-31.082019 31.01802l-112.125664 0c-17.13031 0-31.01802-13.909044-31.01802-31.01802l0-72.510489c0-16.703652-12.885065-34.537947-27.412762-39.423179l-32.873982-13.354388c-6.399867-3.1786-13.162392-4.778567-20.031583-4.778567-11.306431 0-22.143539 4.415908-29.546051 11.946418l-51.348264 51.284265c-10.794442 10.751776-33.065978 10.751776-43.817754 0l-79.358347-79.443678c-5.802546-5.717214-9.002479-13.418387-9.002479-21.802212s3.157268-16.021 9.151809-21.951543l51.156268-51.1776c11.81842-11.839753 15.338347-33.556634 8.49049-47.124352l-13.695715-33.129976c-5.781213-16.703652-23.466178-29.844712-40.31916-29.844712L73.747797 598.942189c-17.108977 0-31.01802-13.866378-31.01802-30.932689l0-112.125664c0-17.13031 13.930376-31.039353 31.01802-31.039353l72.553155 0c16.682319 0 34.537947-12.863732 39.380513-27.370096l13.354388-32.767317c7.893169-16.042332 4.693236-37.972542-7.295848-49.854961l-51.241599-51.262932c-5.802546-5.781213-9.002479-13.546384-9.002479-21.844878 0-8.298494 3.242599-16.084998 9.173142-21.951543l79.209016-79.294348c10.837108-10.837108 33.001979-10.85844 43.796421 0l51.412262 51.454928c8.597154 8.447824 21.802212 11.455761 31.231349 11.455761 6.399867 0 12.159747-1.237308 15.829004-3.114602l32.681986-13.674382c16.874315-5.695881 30.122039-23.423512 30.122039-40.340493L424.951147 73.747797c0-17.108977 13.887711-31.01802 30.996688-31.01802l112.125664 0c17.172976 0 31.082019 13.909044 31.082019 31.01802l0 72.510489c0 16.61832 12.757068 34.473948 27.284765 39.35918l32.916648 13.503719c16.831649 8.149164 37.28989 4.970563 49.662965-7.338514l51.198933-51.241599c10.965105-10.879773 33.044645-10.922439 43.967084-0.042666l79.251682 79.37968c5.823879 5.823879 9.045145 13.58905 9.045145 21.887544 0 8.255828-3.242599 16.042332-9.087811 21.908877L831.982667 315.086769c-11.605092 11.839753-15.06102 33.513968-8.298494 46.953688l13.717048 32.724652c5.674548 16.895648 23.380846 30.122039 40.383159 30.122039l72.617154 0c17.002312 0 30.847357 13.930376 30.847357 31.039353L981.248891 568.052166z"
          p-id="2407" fill="var(--color)"></path>
      </svg>
      <svg id="close-btn" class="top-bar-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="1202">
        <path
          d="M810.666667 273.493333L750.506667 213.333333 512 451.84 273.493333 213.333333 213.333333 273.493333 451.84 512 213.333333 750.506667 273.493333 810.666667 512 572.16 750.506667 810.666667 810.666667 750.506667 572.16 512z"
          p-id="2167" fill="var(--color)"></path>
      </svg>
    </div>
  </div>
  <div id="container">
    <textarea id="content" spellcheck="false"></textarea>
    <div id="option">
      <p class="center" style="font-weight: bold;">设置</p>
      <p class="center mt">字体选择</p>
      <div class="ldg-select" id="select1">
        <input type="text" class="ldg-select-input" id="fontFamily" placeholder="请输入字体">
        <div class="ldg-select-dropdown" id="fontList"></div>
      </div>

      <p class="center mt">明亮颜色</p>
      <p>
        <label for="lightColor">背景：</label><input type="color" id="lightColor" value="#f8f7b6">
      </p>
      <p>
        <label for="lightFontColor">字体：</label><input type="color" id="lightFontColor" value="#000000">
      </p>

      <p class="center mt">暗黑颜色</p>
      <p>
        <label for="darkColor">背景：</label><input type="color" id="darkColor" value="#303133">
      </p>
      <p>
        <label for="darkFontColor">字体：</label><input type="color" id="darkFontColor" value="#999999">
      </p>

      <p class="center mt">不透明度</p>
      <p>
        <input type="range" id="opacity" min="1" max="10" value="8">
      </p>

      <p class="center mt">窗口设置</p>
      <p>
        <input type="checkbox" id="autoWinSize" checked /><label for="autoWinSize">自动调整窗口大小</label>
      </p>

      <p class="center mt">
        <button type="button" id="option-cancel">取消</button>&nbsp;
        <button type="button" id="option-save">保存</button>
      </p>
    </div>
  </div>
  <script src="./win.js"></script>
</body>

</html>